<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房间管理页面</title>
    <!-- bootstrap样式 -->
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/common.js"></script>
</head>
<body>


<div class="container">
    <div id="wu-toolbar">
        <h2>房型列表</h2>

        <div class="wu-toolbar-search">
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    房间编号:<input type="text" class="form-control" placeholder="Search">
                    <label>状态:</label>
                    <select id="type-status" class="form-control" panelHeight="auto" style="width:120px">
                        <option value="-1">全部</option>
                        <option value="0">大床房</option>
                        <option value="1">标间</option>
                    </select>
                    <label>所属楼层:</label>
                    <select id="floor-status" class="form-control" panelHeight="auto" style="width:120px">
                        <option value="-1">全部</option>
                        <option value="0">1楼</option>
                        <option value="1">2楼</option>
                    </select>
                    <label>状态:</label>
                    <select id="search-status" class="form-control" panelHeight="auto" style="width:120px">
                        <option value="-1">全部</option>
                        <option value="0">房型已满</option>
                        <option value="1">可预订可入住</option>
                    </select>
                </div>


                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </div>
        <table class="table table-bordered table-hover ">
            <thead>
            <tr>

                <th>房间图片</th>

                <th>房间编号</th>
                <th>房间类型</th>
                <th>所属楼层</th>
                <th>状态</th>
                <th>房间备注</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="success">

                <td>1</td>

                <td>1001</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1001单人间、1楼。</td>
                <td>
                    <button type="button" class="btn btn-link" data-toggle="modal" data-target="#edit-modal">编辑</button>
                    <button type="button" class="btn btn-link del-modal" data-toggle="modal" data-target="#del-modal">
                        <a href="">删除</a>
                    </button>
                </td>
            </tr>
            <tr>

                <td>1</td>

                <td>2001</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2楼普通大床房</td>

                <td>
                    <button type="button" class="btn btn-link" data-toggle="modal" data-target="#edit-modal">编辑</button>
                    <button type="button" class="btn btn-link del-modal" data-toggle="modal" data-target="#del-modal">
                        <a href="">删除</a>
                    </button>
                </td>
            </tr>

            </tbody>
        </table>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary add-btn " data-toggle="modal" data-target="#add-modal">添加</button>


    </div>
    <nav aria-label="Page navigation" class="fy-nav">
        <ul class="pagination pagination-lg">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>

            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

    <!-- Modal 添加学生 -->
    <div class="modal fade" id="add-modal" tabindex="-1" role="dialog" aria-labelledby="addmyModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addmyModalLabel">添加房间信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="add-form"
                          action="${pageContext.request.contextPath }/admin/StuServlet/addstus">
                        <div class="form-group ">
                            <label for="addexampleInputFile">上传图片</label>
                            <input type="file" id="addexampleInputFile">
                        </div>
                        <div class="form-group">
                            <label for="add-filephtoto" class="col-sm-2 control-label">房间图片：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="filephtoto" id="add-filephtoto">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="add-name" class="col-sm-2 control-label">房间编号：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" id="add-name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">房间类型：</label>
                            <select class="form-control">
                                <option>大床房</option>
                                <option>标准间</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属楼层：</label>
                            <select class="form-control">
                                <option>1楼</option>
                                <option>2楼</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">状态：</label>
                            <select class="form-control">
                                <option>房型已满</option>
                                <option>可预订可入住</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属楼层：</label>
                            <select class="form-control">
                                <option>1楼</option>
                                <option>2楼</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注：</label>
                            <textarea class="form-control" rows="3">撒旦撒旦撒旦</textarea>
                        </div>


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" form="add-form">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal 编辑学生 -->
    <div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑学生信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="edit-form"
                          action="${pageContext.request.contextPath }/admin/StuServlet/addstus">
                        <div class="form-group ">
                            <label for="editexampleInputFile">上传图片</label>
                            <input type="file" id="editexampleInputFile">
                        </div>
                        <div class="form-group">
                            <label for="edit-filephtoto" class="col-sm-2 control-label">房间图片：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="filephtoto" id="edit-filephtoto">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="edit-name" class="col-sm-2 control-label">房间编号：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" id="edit-name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">房间类型：</label>
                            <select class="form-control">
                                <option>大床房</option>
                                <option>标准间</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属楼层：</label>
                            <select class="form-control">
                                <option>1楼</option>
                                <option>2楼</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">状态：</label>
                            <select class="form-control">
                                <option>房型已满</option>
                                <option>可预订可入住</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属楼层：</label>
                            <select class="form-control">
                                <option>1楼</option>
                                <option>2楼</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">备注：</label>
                            <textarea class="form-control" rows="3">撒旦撒旦撒旦</textarea>
                        </div>


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" form="edit-form">保存</button>
                </div>
            </div>
        </div>
    </div>


</div>
<script>
    $(function () {
        $("li").click(function () {
            $(this).addClass("active")
            $(this).siblings().removeClass("active")
        })
    })
</script>
</body>
</html>